<template>
  <div class="content">
    <div class="currentTime">{{ currentTime }}</div>
    <div class="headerTitle">
      <div class="headerTitle_text">英山县医共体糖尿病诊疗中心血糖监测平台</div>
    </div>
    <div class="content_box">
      <div class="left_content content_item">
        <div class="content_item_top center_item_left">
          <div class="center_item_left_headerTitle">
            <span class="center_item_left_headerTitle_title">全县当日情况</span>
          </div>
          <div class="center_item_left_headerContent first_item">
            <div class="first_item_item">
              <div class="first_item_item_left">
                <img src="/img/icon1.png" alt="" class="icon_img" />
                <div
                  class="first_item_item_left_text"
                  style="margin-left: 65px"
                >
                  <div style="font-size: 12px">在院总人数</div>
                  <div
                    style="font-size: 24px; font-weight: 550; margin-top: 2px"
                  >
                    848
                    <span style="font-size: 12px; font-weight: initial"
                      >人</span
                    >
                  </div>
                </div>
              </div>
              <div class="first_item_item_right">
                <img src="/img/icon2.png" alt="" class="icon_img" />
                <div
                  class="first_item_item_left_text"
                  style="margin-left: 65px"
                >
                  <div style="font-size: 12px">今日入院人数</div>
                  <div
                    style="font-size: 24px; font-weight: 550; margin-top: 2px"
                  >
                    56
                    <span style="font-size: 12px; font-weight: initial"
                      >人</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="first_item_item">
              <div class="first_item_item_left">
                <img src="/img/icon3.png" alt="" class="icon_img" />
                <div
                  class="first_item_item_left_text"
                  style="margin-left: 65px"
                >
                  <div style="font-size: 12px">糖尿病患者人数</div>
                  <div
                    style="font-size: 24px; font-weight: 550; margin-top: 2px"
                  >
                    6
                    <span style="font-size: 12px; font-weight: initial"
                      >人</span
                    >
                  </div>
                </div>
              </div>
              <div class="first_item_item_right">
                <img src="/img/icon4.png" alt="" class="icon_img" />
                <div
                  class="first_item_item_left_text"
                  style="margin-left: 65px"
                >
                  <div style="font-size: 12px">高血压患者人数</div>
                  <div
                    style="font-size: 24px; font-weight: 550; margin-top: 2px"
                  >
                    3
                    <span style="font-size: 12px; font-weight: initial"
                      >人</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div
              class="first_item_item"
              style="
                background: rgba(31, 34, 55, 0.4);
                border: 1px solid #114575;
                border-radius: 2px;
              "
            >
              <div class="first_item_item_left">
                <img src="/img/icon5.png" alt="" class="icon_img" />
                <div
                  class="first_item_item_left_text"
                  style="margin-left: 65px"
                >
                  <div style="font-size: 12px">在院总人数</div>
                  <div
                    style="
                      font-size: 16px;
                      font-weight: 550;
                      margin-top: 5px;
                      width: 100%;
                      display: flex;
                    "
                  >
                    <img src="/img/icon_1.png" alt="" class="icon_1" />
                    <div
                      style="
                        color: #11f6ff;
                        font-size: 12px;
                        font-weight: initial;
                        margin-top: 4px;
                      "
                    >
                      全部次数
                    </div>
                    <div
                      style="
                        font-size: 16px;
                        text-align: right;
                        flex: 1;
                        padding-right: 20px;
                      "
                    >
                      12
                    </div>
                  </div>
                </div>
              </div>
              <div class="first_item_item_right">
                <div class="first_item_item_left_text">
                  <div style="font-size: 12px; opacity: 0">在院总人数</div>
                  <div
                    style="
                      font-size: 16px;
                      font-weight: 550;
                      margin-top: 5px;
                      width: 100%;
                      display: flex;
                      padding-left: 10px;
                    "
                  >
                    <img
                      src="/img/icon_2.png"
                      alt=""
                      class="icon_1"
                      style="padding-left: 10px"
                    />
                    <div
                      style="
                        color: #ffef18;
                        font-size: 12px;
                        font-weight: initial;
                        margin-top: 4px;
                        margin-left: 20px;
                      "
                    >
                      异常次数
                    </div>
                    <div
                      style="
                        font-size: 16px;
                        text-align: right;
                        flex: 1;
                        padding-right: 20px;
                      "
                    >
                      5
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_item_top center_item_left">
          <div class="center_item_left_headerTitle">
            <span class="center_item_left_headerTitle_title"
              >全县血糖达标率
            </span>
          </div>
          <div class="center_item_left_headerContent">
            <div class="myChart1">
              <div ref="myChart1" style="flex: 1.2"></div>
              <div style="flex: 1; position: relative">
                <div
                  style="
                    font-size: 12px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  "
                >
                  <div style="margin: 15px">
                    <i class="icon_dian" style="background: #ffef18"></i>
                    高血糖
                  </div>
                  <div style="margin: 15px">
                    <i class="icon_dian" style="background: #114575"></i>
                    低血糖
                  </div>
                  <div style="margin: 15px">
                    <i class="icon_dian" style="background: #11f6ff"></i>
                    正常
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_item_top center_item_left">
          <div class="center_item_left_headerTitle">
            <span class="center_item_left_headerTitle_title"
              >各分中心血糖达标率</span
            >
          </div>
          <div class="center_item_left_headerContent">
            <div style="width: 100%; height: 100%" ref="myChart2"></div>
          </div>
        </div>
      </div>
      <div class="center_content content_item">
        <div class="center_item_top">
          <div class="center_item_top_title">血糖检测</div>
          <div class="center_item_top_box">
            <div class="scroll-container">
              <div class="scroll-container_item" ref="carousel">
                <div class="box" v-for="(item, index) in item" :key="index">
                  <div class="container_item_title">
                    <img src="/img/boxBJTitle.png" alt="" />
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="container_item_data">
                    <div class="container_item_data_left">
                      <div style="font-size: 14px">血糖检测</div>
                      <div style="font-size: 30px; font-weight: bold">
                        {{ item.ctNumber }}
                        <span style="font-size: 14px; font-weight: initial"
                          >次</span
                        >
                      </div>
                    </div>
                    <div class="container_item_data_right">
                      <div style="font-size: 14px">检测人数</div>
                      <div style="font-size: 30px; font-weight: bold">
                        {{ item.number }}
                        <span style="font-size: 14px; font-weight: initial"
                          >人</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="scroll-container_item" ref="carousel2">
                <div class="box" v-for="(item, index) in item2" :key="index">
                  <div class="container_item_title">
                    <img src="/img/boxBJTitle.png" alt="" />
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="container_item_data">
                    <div class="container_item_data_left">
                      <div style="font-size: 14px">血糖检测</div>
                      <div style="font-size: 30px; font-weight: bold">
                        {{ item.ctNumber }}
                        <span style="font-size: 14px; font-weight: initial"
                          >次</span
                        >
                      </div>
                    </div>
                    <div class="container_item_data_right">
                      <div style="font-size: 14px">检测人数</div>
                      <div style="font-size: 30px; font-weight: bold">
                        {{ item.number }}
                        <span style="font-size: 14px; font-weight: initial"
                          >人</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center_item_center">
          <div class="center_item_center_Map">
            <img src="/img/mapImg.png" alt="" />
          </div>
          <div class="center_item_center_table">
            <div class="mapTable">
              <div class="center_item_center_table_title">
                2024年7月7日至2024年8月7日分中心检测统计
              </div>
              <div class="center_item_center_table_box">
                <div class="table_header">
                  <div style="width: 18%; font-size: 12px">序号</div>
                  <div style="flex: 1; font-size: 12px">分中心</div>
                  <div style="width: 20%; font-size: 12px">测试人数</div>
                </div>
                <div class="table_content">
                  <div
                    class="table_content_item"
                    v-for="(item, index) in centerList"
                    :key="index"
                  >
                    <div style="width: 18%; font-size: 12px">
                      <span
                        style="
                          margin-right: 10px;
                          display: inline-block;
                          width: 8px;
                        "
                        >{{ index + 1 }}</span
                      >
                      <span
                        class="icon iconfont"
                        :style="{ color: item.color, 'font-size': '12px' }"
                        style="line-height: 22px"
                        >&#xe647;</span
                      >
                    </div>
                    <div style="flex: 1; font-size: 12px">{{ item.name }}</div>
                    <div style="width: 20%; font-size: 12px">
                      {{ item.value }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center_item_bottom">
          <div class="content_item_top center_item_left" style="height: 100%">
            <div
              class="center_item_left_headerTitle"
              style="
                background: url('/img/TIRTitle.png');
                background-size: 100% 100%;
                background-position: center center;
                background-repeat: no-repeat;
              "
            >
              <span class="center_item_left_headerTitle_title">TIR比例</span>
            </div>
            <div
              class="center_item_left_headerContent"
              style="
                height: calc(100% - 30px);
                background: url('/img/TIR_headerContent.png');
                background-size: 100% 100%;
                background-position: center center;
                background-repeat: no-repeat;
                display: flex;
                padding: 0 5%;
              "
            >
              <div style="flex: 1">
                <div
                  style="height: 100%; width: 100%; padding: 15%"
                  ref="myChart3"
                ></div>
              </div>
              <div style="flex: 1">
                <div
                  style="height: 100%; width: 100%; padding: 15%"
                  ref="myChart4"
                ></div>
              </div>
              <div style="flex: 1">
                <div
                  style="height: 100%; width: 100%; padding: 15%"
                  ref="myChart5"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right_content content_item">
        <div class="content_item_top center_item_left">
          <div class="center_item_left_headerTitle">
            <span class="center_item_left_headerTitle_title">最新情况</span>
          </div>
          <div
            class="center_item_left_headerContent"
            style="padding: 20px 15px; padding-bottom: 0; overflow: hidden"
          >
            <div class="rightTable">
              <div
                class="rightTable_header"
                style="position: relative; z-index: 2"
              >
                <div class="rightTable_header_title" style="flex: 0.7">
                  患者
                </div>
                <div class="rightTable_header_title" style="flex: 0.5">
                  血糖
                </div>
                <div class="rightTable_header_title">检测时间</div>
                <div class="rightTable_header_title" style="flex: 1.2">
                  分中心
                </div>
                <div class="rightTable_header_title">科室</div>
              </div>
              <div class="rightTable_content" ref="carousel3">
                <div
                  class="rightTable_content_item scroll-item"
                  v-for="(item, index) in rightTableData"
                  :key="index"
                >
                  <div class="rightTable_header_title" style="flex: 0.7">
                    {{ item.name }}
                  </div>
                  <div class="rightTable_header_title" style="flex: 0.5">
                    <span
                      style="position: relative; color: #ffef18"
                      v-if="item.num > 10"
                    >
                      {{ item.num }}
                      <img
                        src="/img/top.png"
                        alt=""
                        style="
                          height: 15px;
                          position: absolute;
                          right: -15px;
                          bottom: 0;
                        "
                      />
                    </span>
                    <span
                      style="position: relative; color: #11f6ff"
                      v-if="item.num <= 10 && item.num >= 5"
                    >
                      {{ item.num }}
                    </span>
                    <span
                      style="position: relative; color: #0093ff"
                      v-if="item.num < 5"
                    >
                      {{ item.num }}
                      <img
                        src="/img/bottom.png"
                        alt=""
                        style="
                          height: 15px;
                          position: absolute;
                          right: -15px;
                          bottom: 0;
                        "
                      />
                    </span>
                  </div>
                  <div class="rightTable_header_title">{{ item.time }}</div>
                  <div class="rightTable_header_title" style="flex: 1.2">
                    {{ item.center }}
                  </div>
                  <div class="rightTable_header_title">
                    {{ item.department }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_item_top center_item_left">
          <div class="center_item_left_headerTitle">
            <span class="center_item_left_headerTitle_title"
              >全县血糖监测趋势图</span
            >
          </div>
          <div class="center_item_left_headerContent">
            <div style="height: 100%; width: 100%" ref="myChart6"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer_text">豪摩尔（深圳）健康科技有限公司 版权所有</div>
      <div class="footer_img"></div>
    </div>
  </div>
</template>

<script>
// import { login } from "./../api/index"; 
import * as echarts from "echarts";
import "echarts-liquidfill"; // 引入水波图插件
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      currentIndex: 0,
      intervalId: null,
      currentIndex2: 0,
      intervalId2: null,
      item: [],
      item2: [], // 生成13个元素的数组
      // 中间地图右侧列表数据
      centerList: [
        {
          name: "英山县人民医院",
          value: "123",
          color: "#ff0000",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县草盘地中心卫生院",
          value: "123",
          color: "#ff6700",
          ctNumber: "6",
          number: "23",
        },
        {
          name: "英山县陶家河乡卫生院",
          value: "123",
          color: "#ffaf00",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县杨柳湾镇中心卫生院",
          value: "123",
          color: "#fffa00",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县方家咀乡卫生院",
          value: "123",
          color: "#b4ff00",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县温泉镇卫生院",
          value: "123",
          color: "#24ff00",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县雷家店镇卫生院",
          value: "123",
          color: "#00cc52",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县红山镇卫生院",
          value: "123",
          color: "#00bfcc",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县金家铺镇卫生院",
          value: "123",
          color: "#0054cd",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县南河镇中心卫生院",
          value: "123",
          color: "#0025cd",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县石头咀中心卫生院",
          value: "123",
          color: "#5800fa",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县孔家坊乡卫生院",
          value: "123",
          color: "#a100fa",
          ctNumber: "466",
          number: "23",
        },
        {
          name: "英山县精神病医院",
          value: "123",
          color: "#db00fa",
          ctNumber: "466",
          number: "23",
        },
      ],
      // 右侧列表数据
      rightTableData: [
        {
          name: "周春兰",
          num: 17.3,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 17.3,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 17.3,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 5.2,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 5.2,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 5.2,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 3.5,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 3.5,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 3.5,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 3.5,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 3.5,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 17.3,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 17.3,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 17.3,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
        {
          name: "周春兰",
          num: 5.2,
          time: "07-23 10:10",
          center: "英山县人民医院",
          department: "内分泌科病区",
        },
      ],
      isAnimating: false,
      currentTime: new Date().toLocaleString("zh-CN", {
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
      }),
    };
  },
  mounted() {
    // 中间数据分割为上下两排遍历
    this.centerList.forEach((a, i) => {
      console.log(i);
      if (i <= 6) {
        this.item.push(a);
      }
      if (i > 6) {
        this.item2.push(a);
      }
    });
    // 定时任务动画效果统一启动
    this.startCarousel();

    // 初始化echarts
    this.initChart();
    this.barChart();
    this.liquidFillChart1();
    this.liquidFillChart2();
    this.liquidFillChart3();
    this.lineChart();
  },
  methods: {
    // 全局定时器统一调用
    startCarousel() {
      this.intervalId = setInterval(this.moveNext, 2000);
      this.intervalId2 = setInterval(this.moveNext2, 2000);
      this.intervalId2 = setInterval(this.moveNext3, 2000);
      // 每秒更新一次时间
      this.timeInterval = setInterval(() => {
        this.currentTime = new Date().toLocaleString("zh-CN", {
          year: "numeric",
          month: "long",
          day: "numeric",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          hour12: false,
        });
      }, 1000);
    },
    // 中间上排方块滚动效果
    moveNext() {
      const carousel = this.$refs.carousel;
      const itemWidth = 300; // 每个项目的宽度

      // 使用transition动画进行平滑滚动
      carousel.style.transition = "transform 0.5s ease";
      carousel.style.transform = `translateX(-${itemWidth}px)`;

      // 动画结束后，重置位置并更新items数组
      setTimeout(() => {
        // 去掉过渡效果，瞬间移动到初始位置
        carousel.style.transition = "none";
        carousel.style.transform = `translateX(0)`;

        // 把第一个元素移到最后一个位置
        const firstItem = this.item.shift();
        this.item.push(firstItem);
      }, 500); // 500ms和CSS中的transition时间一致
    },
    // 中间二排方块滚动效果
    moveNext2() {
      const carousel = this.$refs.carousel2;
      const itemWidth = 300; // 每个项目的宽度

      // 使用transition动画进行平滑滚动
      carousel.style.transition = "transform 0.5s ease";
      carousel.style.transform = `translateX(-${itemWidth}px)`;

      // 动画结束后，重置位置并更新items数组
      setTimeout(() => {
        // 去掉过渡效果，瞬间移动到初始位置
        carousel.style.transition = "none";
        carousel.style.transform = `translateX(0)`;

        // 把第一个元素移到最后一个位置
        const firstItem = this.item2.shift();
        this.item2.push(firstItem);
      }, 500); // 500ms和CSS中的transition时间一致
    },
    // 右侧列表滚动效果
    moveNext3() {
      const carousel = this.$refs.carousel3;
      const itemWidth = 32; // 每个项目的宽度

      // 使用transition动画进行平滑滚动
      carousel.style.transition = "transform 0.5s ease";
      carousel.style.transform = `translateY(-${itemWidth}px)`;

      // 动画结束后，重置位置并更新items数组
      setTimeout(() => {
        // 去掉过渡效果，瞬间移动到初始位置
        carousel.style.transition = "none";
        carousel.style.transform = `translateY(0)`;

        // 把第一个元素移到最后一个位置
        const firstItem = this.rightTableData.shift();
        this.rightTableData.push(firstItem);
      }, 500); // 500ms和CSS中的transition时间一致
    },
    // 饼图option
    pieOption() {
      let option = {
        color: ["#FFEF18", "#427EF2", "#11F6FF"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "统计",
            type: "pie",
            center: ["50%", "50%"], // 调整饼图的位置，使其更靠下
            roseType: "radius",
            radius: 60,
            label: {
              show: true,
              formatter: "{d}%",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: [
              {
                value: 25,
                name: "高血糖",
              },
              {
                value: 20,
                name: "正常",
              },
              {
                value: 15,
                name: "低血糖",
              },
            ],
          },
          {
            name: "占位",
            type: "pie",
            silent: false,
            center: ["50%", "50%"],
            radius: 20,
            hoverAnimation: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              itemStyle: {
                color: "#000",
              },
            },
            data: [
              {
                value: 1,
              },
            ],
            itemStyle: {
              normal: {
                color: "#000",
              },
            },
            tooltip: {
              show: false, // 禁用该系列的 tooltip
            },
            zlevel: 1, // 确保这个系列在最顶层
          },
        ],
      };
      return option;
    },
    // 柱状图option
    barOption() {
      // mock数据
      const dataArr = {
        xdata: [
          "英山县陶家\n河乡卫生院",
          "英山县人民\n医院",
          "英山县孔家\n坊乡卫生院",
          "英山县石头咀\n中心卫生院",
          "英山县精神\n病医院",
        ],
        vaccination: [1000, 1300, 1200, 800, 600],
        unvaccinated: [700, 800, 900, 500, 300],
        unvaccinatedTwo: [400, 300, 500, 200, 100],
      };

      // tooltip
      const tooltip = {
        trigger: "axis",
        textStyle: { fontSize: "100%" },
        formatter: (params) => {
          let rander = params
            .map((item) =>
              item.seriesType !== "pictorialBar"
                ? `<div>${item.seriesName}: ${
                    item.seriesType !== "line" ? item.value : item.value + "%"
                  }</div>`
                : ""
            )
            .join("");
          return `
            <div>${params[0].axisValue}</div>
            ${rander}
        `;
        },
      };
      const legend = {
        data: ["高血糖", "低血糖", "正常"],
        textStyle: { fontSize: 12, color: "#fff" },
        itemWidth: 16,
        itemHeight: 10,
        itemGap: 15,
        top: "5%",
        selectedMode: false,
      };
      const grid = { top: "20%", left: "10%", right: "6%", bottom: "15%" };
      // xAxis
      const xAxis = {
        axisTick: { show: true },
        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
        axisLabel: {
          textStyle: { fontSize: 10, color: "#fff", lineHeight: 12 },
        },
        data: dataArr.xdata,
      };

      // yAxis
      const yAxis = [
        {
          axisTick: { show: false },
          axisLine: { show: false },
          splitLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
        },
        {
          show: true,
          max: 100,
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            textStyle: { fontSize: 12, color: "#fff" },
            formatter: (params) => {
              return `${params}%`;
            },
          },
        },
      ];

      // series
      const series = [
        {
          z: 1,
          name: "上部1",
          type: "pictorialBar",
          symbolPosition: "end",
          data: dataArr.vaccination,
          symbol: "diamond",
          symbolOffset: ["-50%", "-50%"],
          symbolSize: [20, 10],
          itemStyle: {
            borderColor: "#FFEF18",
            color: "#FFEF18",
          },
        },
        {
          z: 1,
          type: "bar",
          name: "高血糖",
          barWidth: 20,
          barGap: "-50%",
          data: dataArr.vaccination,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              x2: 1,
              y: 0,
              y2: 0,
              colorStops: [
                { offset: 0, color: "rgba(255, 239, 24, .7)" },
                { offset: 0.5, color: "rgba(255, 239, 24, .7)" },
                { offset: 0.5, color: "rgba(255, 239, 24, .3)" },
                { offset: 1, color: "rgba(255, 239, 24, .3)" },
              ],
            },
          },
        },
        {
          z: 2,
          name: "上部1",
          type: "pictorialBar",
          symbolPosition: "end",
          data: dataArr.unvaccinated,
          symbol: "diamond",
          symbolOffset: [0, "-50%"],
          symbolSize: [20, 10],
          itemStyle: {
            borderColor: "#427EF2",
            color: "#427EF2",
          },
        },
        {
          z: 2,
          type: "bar",
          name: "低血糖",
          barWidth: 20,
          data: dataArr.unvaccinated,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              x2: 1,
              y: 0,
              y2: 0,
              colorStops: [
                { offset: 0, color: "rgba(66, 126, 242, 1)" },
                { offset: 0.5, color: "rgba(66, 126, 242, 1)" },
                { offset: 0.5, color: "rgba(66, 126, 242, .3)" },
                { offset: 1, color: "rgba(66, 126, 242, .3)" },
              ],
            },
          },
        },
        {
          z: 3,
          name: "上部1",
          type: "pictorialBar",
          symbolPosition: "end",
          data: dataArr.unvaccinatedTwo,
          symbol: "diamond",
          symbolOffset: ["50%", "-50%"],
          symbolSize: [19, 10],
          itemStyle: {
            borderColor: "#11F6FF",
            color: "#11F6FF",
          },
        },
        {
          z: 3,
          type: "bar",
          name: "正常",
          barWidth: 20,
          data: dataArr.unvaccinatedTwo,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              x2: 1,
              y: 0,
              y2: 0,
              colorStops: [
                { offset: 0, color: "rgba(17, 246, 255, .7)" },
                { offset: 0.5, color: "rgba(17, 246, 255, .7)" },
                { offset: 0.5, color: "rgba(17, 246, 255, .3)" },
                { offset: 1, color: "rgba(17, 246, 255, .3)" },
              ],
            },
          },
        },
      ];
      let option = {
        tooltip,
        xAxis,
        yAxis,
        series,
        grid,
        legend,
        backgroundColor: "transparent",
      };
      return option;
    },
    // 水位图option
    liquidFillOption(waterGradient, borderGradient, index) {
      let option = {
        backgroundColor: "transparent", //背景色
        series: [
          {
            type: "liquidFill", //水位图
            radius: "90%", //显示比例
            center: ["50%", "50%"], //中心点
            amplitude: 5, //水波振幅
            data: [index / 100, index / 100, index / 100], // data个数代表波浪数
            color: [waterGradient], //波浪颜色
            backgroundStyle: {
              borderWidth: 2, //外边框
              borderColor: borderGradient, //边框颜色
              color: "transparent", //边框内部填充部分颜色
            },
            label: {
              //标签设置
              normal: {
                position: ["50%", "52%"],
                formatter: `${index}%`, //显示文本,
                textStyle: {
                  fontSize: "16px", //文本字号,
                  color: "#fff",
                  textShadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
                  textShadowBlur: 5, // 阴影模糊程度
                  textShadowOffsetX: 0, // 阴影X轴偏移
                  textShadowOffsetY: 0, // 阴影Y轴偏移
                },
              },
            },
            outline: {
              show: false, //最外层边框显示控制
              borderDistance: 0,
              itemStyle: {
                borderWidth: 5,
                borderColor: "#2196F3",
              },
            },
          },
        ],
      };
      return option;
    },
    // 折线图option
    lineOption(data) {
      let option = {
        backgroundColor: "transparent",
        title: {
          show: false,
          top: "5%",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0.3)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: {
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
            },
            axisLabel: {
              color: "#999",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: ["23:08", "23:09", "23:10", "23:11", "23:12"],
          },
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#999"],
                opacity: 0.06,
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                fontSize: 12,
                color: "#999",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "血糖",
            type: "line",
            smooth: true, //是否平滑
            showAllSymbol: true,
            showSymbol: false,
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "rgba(17, 246, 255, 1)",
                shadowColor: "rgba(0, 0, 0, 0)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            itemStyle: {
              color: "rgba(17, 246, 255, 1)",
              borderColor: "rgb(108,78,0)",
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0)",
              shadowBlur: 0,
              shadowOffsetY: 0,
              shadowOffsetX: 0,
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(17, 246, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(17, 246, 255, 0)",
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: data,
          },
        ],
        legend: {
          orient: "horizontal", // 图例的排列方向
          right: "0%", // 距离右侧的距离，可以根据需要调整
          top: "5%", // 距离顶部的距离
          textStyle: {
            color: "#fff",
          },
          data: ["血糖"], // 图例对应的系列名称
        },
      };
      return option;
    },
    // 饼图初始化
    initChart() {
      const myChart = echarts.init(this.$refs.myChart1);
      myChart.setOption(this.pieOption());
    },
    // 柱状图初始化
    barChart() {
      const myChart = echarts.init(this.$refs.myChart2);
      myChart.setOption(this.barOption());
    },
    // 水位图1初始化
    liquidFillChart1() {
      const myChart = echarts.init(this.$refs.myChart3);

      // 设置水波的线性渐变
      let waterGradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#FF9518" }, // 顶部颜色
        { offset: 1, color: "#FFEF18" }, // 底部颜色
      ]);

      // 设置边框的线性渐变
      let borderGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: "#FFB218" }, // 左侧颜色
        { offset: 1, color: "#FFEF18" }, // 右侧颜色
      ]);
      myChart.setOption(
        this.liquidFillOption(waterGradient, borderGradient, 76.47)
      );
    },
    // 水位图2初始化
    liquidFillChart2() {
      const myChart = echarts.init(this.$refs.myChart4);

      // 设置水波的线性渐变
      let waterGradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#002DFE" }, // 顶部颜色
        { offset: 1, color: "#427EF2" }, // 底部颜色
      ]);

      // 设置边框的线性渐变
      let borderGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: "#424DF2" }, // 左侧颜色
        { offset: 1, color: "#427EF2" }, // 右侧颜色
      ]);
      myChart.setOption(
        this.liquidFillOption(waterGradient, borderGradient, 51.24)
      );
    },
    // 水位图3初始化
    liquidFillChart3() {
      const myChart = echarts.init(this.$refs.myChart5);

      // 设置水波的线性渐变
      let waterGradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#114FFF" }, // 顶部颜色
        { offset: 1, color: "#11F6FF" }, // 底部颜色
      ]);

      // 设置边框的线性渐变
      let borderGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: "#11C5FF" }, // 左侧颜色
        { offset: 1, color: "#11F6FF" }, // 右侧颜色
      ]);
      myChart.setOption(
        this.liquidFillOption(waterGradient, borderGradient, 51.24)
      );
    },
    // 折线图初始化
    lineChart() {
      const myChart = echarts.init(this.$refs.myChart6);
      let data = [1502.84, 2050.97, 2532.79, 1281.55, 1398.35, 2214.02];
      myChart.setOption(this.lineOption(data));
    },
  },
  //生命周期  卸载页面时清理定时器
  beforeDestroy() {
    clearInterval(this.intervalId);
    clearInterval(this.intervalId2);
    clearInterval(this.timeInterval);
  },
};
</script>

<style lang="scss" scoped>
.content {
  font-family: "Microsoft YaHei", sans-serif;
  color: #fff;
  width: 100%;
  height: 100%;
  background: url("/public/img/bg.jpg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  .currentTime {
    position: fixed;
    top: 10px;
    left: 10px;
    font-size: 12px;
  }
  .headerTitle {
    background: url("/public/img/headerTitle.png");
    height: 9%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    .headerTitle_text {
      font-family: AlibabaPuHuiTiB;
      font-size: 30px;
      text-shadow: 0px 6px 3px rgba(0, 0, 0, 0.15);
      text-align: center;
      font-weight: bold;
      line-height: 70px;
      background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 30%,
        #f5ff1f 100%
      );
      -webkit-background-clip: text; /* 背景裁剪为文字形状 */
      color: transparent; /* 使用透明色确保背景显示在文字上 */
    }
  }
  .content_box {
    display: flex;
    width: 100%;
    height: 86%;
    .content_item {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      margin: 10px;
      .center_item_left {
        flex-grow: 0;
        justify-content: center;
        margin: 10px 0;
        flex-basis: calc((100% / 3));
        .center_item_left_headerTitle {
          background: url("/public/img/center_item_left_headerTitle.png");
          height: 30px;
          width: 100%;
          background-size: 100% 100%;
          background-position: center center;
          background-repeat: no-repeat;
          .center_item_left_headerTitle_title {
            letter-spacing: 1px;
            padding-left: 6%;
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            text-align: left;
            height: 100%;
            display: flex;
            align-items: center; /* 垂直居中 */
          }
        }
        .center_item_left_headerContent {
          background: url("/public/img/center_item_left_headerContent.png");
          width: 100%;
          height: 90%;
          background-size: 100% 100%;
          background-position: center center;
          background-repeat: no-repeat;
          overflow: hidden;
        }
      }
    }
    .center_content {
      flex: 1.25;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .center_item_left {
        margin: 0;
      }
      .center_item_top {
        flex: 1.3;
        margin: 10px 0;
        .center_item_top_title {
          height: 53px;
          letter-spacing: 1px;
          line-height: 53px;
          padding-left: 50px;
          font-weight: bold;
          font-size: 16px;
          width: 226px;
          background: url("/public/img/title.png");
          background-size: 100% 100%;
          background-position: center center;
          background-repeat: no-repeat;
        }
        .center_item_top_box {
          height: calc(100% - 53px);
          overflow: hidden;
          position: relative;
          .scroll-container {
            position: absolute;
            width: 2065px;
            height: 100%;
            overflow: hidden;
            .scroll-container_item {
              height: 50%;
              width: 100%;
              transition: transform 0.5s ease;
              overflow: hidden;
              .box {
                padding: 10px;
                width: 300px;
                height: 100%;
                float: left;
                background: url("/public/img/boxBJ.png");
                background-size: 100% 100%;
                background-position: center center;
                background-repeat: no-repeat;
                .container_item_title {
                  position: relative;
                  width: 100%;
                  height: 30px;
                  span {
                    position: absolute;
                    left: 0;
                    top: 0;
                    line-height: 30px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #11f6ff;
                    z-index: 2;
                    margin-left: 40px;
                  }
                  img {
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 1;
                  }
                }
                .container_item_data {
                  display: flex;
                  .container_item_data_left {
                    flex: 1;
                    margin: 10px 20px;
                  }
                  .container_item_data_right {
                    flex: 1;
                    margin: 10px 20px;
                  }
                }
              }
            }
          }
        }
      }
      .center_item_center {
        height: 360px;
        margin: 10px 5%;
        display: flex;
        .center_item_center_Map {
          flex: 0.8;
          padding-right: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .center_item_center_table {
          flex: 1;
          padding: 10px 20px;
          .mapTable {
            width: 100%;
            height: 100%;
            background: url("/public/img/mapTable.png");
            background-size: 100% 100%;
            background-position: center center;
            background-repeat: no-repeat;
            padding: 0 10px;
            .center_item_center_table_title {
              width: 100%;
              font-size: 12px;
              line-height: 28px;
            }
            .center_item_center_table_box {
              height: calc(100% - 28px);
              width: 100%;
              .table_header {
                height: 26px;
                line-height: 26px;
                width: 100%;
                display: flex;
                color: #00a6ff;
              }
              .table_content {
                height: calc(100% - 26px);
                width: 100%;
                .table_content_item {
                  width: 100%;
                  height: 22px;
                  line-height: 22px;
                  display: flex;
                }
              }
            }
          }
        }
      }
      .center_item_bottom {
        flex: 0.8;
        margin: 10px 0;
      }
    }
    .right_content {
      flex: 1;
      display: flex;
      .content_item_top {
        flex-grow: 0;
        flex-basis: calc((100% / 2));
        overflow: hidden;
        .center_item_left_headerContent {
          height: calc(100% - 30px);
        }
      }
    }
    .left_content {
      display: flex;
      flex-direction: column;
      .center_item {
        flex: 1;
      }
      .first_item {
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        .first_item_item {
          flex: 1;
          display: flex;
          padding-left: 10px;
          .first_item_item_left {
            flex: 1;
            overflow: hidden;
            position: relative;
            .icon_img {
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              height: 60px;
              margin: auto 0;
            }
            .icon_1 {
              height: 16px;
              width: 16px;
              float: left;
              margin-top: 5px;
              padding-right: 5px;
            }
            .first_item_item_left_text {
              width: calc(100% - 80px);
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          .first_item_item_right {
            flex: 1;
            overflow: hidden;
            position: relative;
            img {
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              height: 60px;
              margin: auto 0;
            }
            .first_item_item_left_text {
              width: calc(100% - 80px);
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
            .icon_1 {
              height: 16px;
              width: 16px;
              float: left;
              margin-top: 12px;
              padding-right: 10px;
            }
          }
        }
      }
    }
  }
  .footer {
    height: 5%;
    margin-top: 10px;
    .footer_img {
      width: 100%;
      height: calc(100% - 20px);
      background: url("/public/img/footer.png");
      background-size: 100% 100%;
      background-position: center center;
      background-repeat: no-repeat;
    }
    .footer_text {
      color: #fff;
      line-height: 10px;
      text-align: center;
      width: 100%;
      font-size: 10px;
    }
  }
  .myChart1 {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .icon_dian {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
  }
}
.rightTable {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .rightTable_header {
    display: flex;
    font-size: 12px;
    color: #00a6ff;
    line-height: 32px;
    background: #1f2237;
    border: 1px solid #114575;
    border-radius: 2px;
    padding: 0 10px;
    div {
      flex: 1;
    }
  }
  .rightTable_content {
    padding: 0 10px;
    position: relative;
    overflow: hidden;
    .rightTable_content_item {
      display: flex;
      font-size: 12px;
      line-height: 32px;
      div {
        flex: 1;
      }
    }
    .scroll-item {
      height: 32px;
      line-height: 32px;
      transition: transform 0.5s ease;
      white-space: nowrap; /* 确保内容不换行 */
    }

    .animate {
      transform: translateY(-40px);
    }
  }
}
</style>
